<template>
	<view class="content">
		<view class="nav-header">
			<view class="search">
				<view class="row" @tap="search">
					<image class="search-img" src="../../static/home/search_icon.png" mode=""></image>
					搜索你想要的商品
				</view>
			</view>
		</view>
		<view class="null"></view>
		<image class="back" src="../../static/home/bg.png" mode=""></image>
		<view class="swipe">
			<swiper :indicator-dots="true" :circular="true" indicator-active-color="rgba(232,39,27,1)" :autoplay="true" interval="5000"
			 duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @tap="swiperTap(index)">
					<image class="image" :src="item.imageUrl" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 选择面板 -->
		<view class="chose-pan">
			<view class="chose-item" @tap="chose(index)" v-for="(item,index) in chosePan" :key="index">
				<view class="">
					<image :src=item.imageUrl mode=""></image>
				</view>
				<view class="text">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="you-like">
			<image src="../../static/home/icon-left.png" mode=""></image>
			<text>猜你喜欢</text>
			<image src="../../static/home/icon-right.png" mode=""></image>
		</view>
		<!-- 列表 -->
		<view class="item-pan">
			<view class="list" @tap="productDetail(index)" v-for="(item,index) in date" :key="index">
				<view class="image">
					<image src="../../static/home/poster.png" mode=""></image>
				</view>
				<view class="title">
					<view class="text">{{item.name}}</view>
				</view>
				<view class="persent">
					<view class="left">
						佣金6%
					</view>
					<view class="right">
						已售32
					</view>
				</view>
				<view class="ticket">
					<text class="left">券后</text>
					¥<text class="center">83.00</text>
					<text class="right">¥149</text>
				</view>
				<view class="btn">
					<image src="../../static/home/icon-pro.png" mode=""></image>
					赚<text>￥0.15</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
					imageUrl: '../../static/home/poster.png'
				}, {
					imageUrl: '../../static/home/poster.png'
				}],
				chosePan: [{
						imageUrl: '../../static/home/icon-1.png',
						name: '服装鞋包'
					},
					{
						imageUrl: '../../static/home/icon-2.png',
						name: '手机数码'
					},
					{
						imageUrl: '../../static/home/icon-3.png',
						name: '美妆个护'
					},
					{
						imageUrl: '../../static/home/icon-4.png',
						name: '运动户外'
					},
					{
						imageUrl: '../../static/home/icon-5.png',
						name: '零食小吃'
					},
					{
						imageUrl: '../../static/home/icon-6.png',
						name: '童装母婴'
					},
					{
						imageUrl: '../../static/home/icon-7.png',
						name: '家电电器'
					},
					{
						imageUrl: '../../static/home/icon-8.png',
						name: '家居百货'
					},
					{
						imageUrl: '../../static/home/icon-9.png',
						name: '文化玩乐'
					},
					{
						imageUrl: '../../static/home/icon-10.png',
						name: '生活服务'
					},
				],
				date: [{
						imageUrl: '../../static/home/icon-1.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-2.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-3.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-4.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-5.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-6.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-7.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-8.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-9.png',
						name: '陶瓷花瓶北欧创意干...'
					},
					{
						imageUrl: '../../static/home/icon-10.png',
						name: '陶瓷花瓶北欧创意干...'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			search() {
				uni.navigateTo({
					url: '/pages/homes/search/search'
				})
			},
			// 轮播点击
			swiperTap(index) {

			},
			// 面板选择
			chose(index) {
				uni.navigateTo({
					url: '/pages/homes/shortcuts/shortcuts?name=' + this.chosePan[index].name
				})
			},
			//详情页面
			productDetail(index) {
				uni.navigateTo({
					url: "/pages/homes/productDetail/productDetail"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.nav-header {
		width: 100%;
		position: fixed;
		z-index: 5;
		padding-top: 48upx;
		background:#E8271B;
		.search {
			height: 88upx;
			background: #E8271B;
			display: flex;
			align-items: center;
			justify-content: center;

			.row {
				width: 694upx;
				height: 64upx;
				background: rgba(255, 255, 255, 1);
				border-radius: 32upx;
				line-height: 64upx;
				display: flex;
				align-items: center;
				font-size: 28upx;
				font-weight: 500;
				line-height: 49px;
				color: rgba(204, 204, 204, 1);
				opacity: 1;

				.search-img {
					width: 40upx;
					height: 40upx;
					margin-left: 30upx;
					margin-right: 10upx;
				}

			}
		}
	}

	.null {
		width: 100%;
		height: 145upx;
	}

	.back {
		position: absolute;
		top: 88upx;
		width: 100%;
		height: 200upx;
	}

	.swipe {
		position: relative;
		margin: 15upx auto 0;
		width: 694upx;
		height: 300upx;

		.image {
			width: 694upx;
			height: 300upx;
			border-radius: 30upx;
		}
	}

	.chose-pan {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;

		.chose-item {
			margin-top: 30upx;
			width: 150upx;
			text-align: center;

			image {
				width: 84upx;
				height: 84upx;
			}

			.text {
				line-height: 33upx;
				font-size: 24upx;
				font-weight: 500;
				color: rgba(77, 77, 77, 1);
			}
		}
	}

	.you-like {
		margin: 40upx 0 20upx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40upx;
		font-size: 28upx;
		font-weight: 500;
		line-height: 34upx;
		color: rgba(77, 77, 77, 1);
		opacity: 1;

		text {
			margin: 0 10upx;
		}

		image {
			width: 43upx;
			height: 15upx;
		}
	}

	.item-pan {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		.list {
			width: 334upx;
			height: 564upx;
			background: rgba(255, 255, 255, 1);
			margin: 10upx 0;
			border-radius: 20upx;
			overflow: hidden;

			.image {
				width: 334upx;
				height: 334upx;

				image {
					width: 334upx;
					height: 334upx;
				}
			}

			.title {
				margin: 5upx 20upx;
				display: flex;
				align-items: center;

				image {
					margin-right: 8upx;
					width: 60upx;
					height: 28upx;
				}

				.text {
					font-size: 24upx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					width: 226upx;
					overflow: hidden;
					/*超出部分隐藏*/
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					white-space: nowrap;
				}
			}

			.persent {
				margin: 0 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 22upx;
					font-weight: 500;
					color: rgba(232, 39, 27, 1);
				}

				.right {
					font-size: 22upx;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
			}

			.ticket {
				margin: 0 20upx;
				font-size: 22upx;
				font-weight: bold;
				color: rgba(232, 39, 27, 1);

				.left {
					font-size: 22upx;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
					margin-right: 10upx;
				}

				.center {
					font-size: 28upx;
					font-weight: bold;
					color: rgba(232, 39, 27, 1);
					margin-right: 10upx;
				}

				.right {
					font-size: 20upx;
					font-weight: 500;
					color: rgba(204, 204, 204, 1);
					text-decoration: line-through;
				}
			}

			.btn {
				font-size: 22upx;
				color: rgba(232, 39, 27, 1);
				width: 294upx;
				height: 68upx;
				border: 1upx solid rgba(232, 39, 27, 1);
				border-radius: 34upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;

				image {
					width: 36upx;
					height: 36upx;
					margin-right: 10upx;
				}

				text {
					font-size: 32upx;
					font-weight: bold;
					color: rgba(232, 39, 27, 1);
				}
			}
		}
	}
</style>
